/**
 * 基金池 加入关注
 */

 import React,{PropTypes,Component,PureComponent}  from 'react';
 import {Button ,Modal, Form,Row,Col,message } from 'antd';
 import { connect } from 'react-redux';

 import NewPolicyGrouping from './NewPolicyGrouping';
 import {PolicyGroup} from './PolicyGrouping';
 import style from './joinAttention.less';

 const FormItem = Form.Item;
 const JoinAttentionForm = Form.create()(
   (props) => {
   const { visible, onCancel, onCreate, form ,GroupList,isPublic} = props;
   console.log("000----",props);
   const { getFieldDecorator } = form;
   const tag = 'fundpool';
   const type = 'add';
   return (
     visible?
      <Modal
        className={`${style.joinattention} add-panel`}
        visible={visible}
        title="已有分组"
        okText="确定"
        onCancel={onCancel}
        onOk={onCreate}
      >
        <Row >
          <Form layout="vertical">
            <Row type="flex" justify="space-around">
              {/* 策略分组选择 */}
              <Col>
                <PolicyGroup tag={tag} data={GroupList}/>
              </Col>
              <Col>
                {/* 新建策略分组 */}
                <NewPolicyGrouping type={type} isPublic={isPublic}/>
              </Col>
            </Row>
          </Form>
        </Row>
      </Modal>: null
    );
  }
 )

 const mapStateToProps = state => ({
    GroupList: state.fundpool.GroupList,
    groupNumberID:state.fundpool.groupNumberID
 });
 const mapDispatchToProps = {
    joinAttention: query => ({
      type: 'fundpool/joinAttention',
      payload: query || {},
    })
 };
 @connect( mapStateToProps,mapDispatchToProps)
  class JoinAttention extends PureComponent {
  state = {
    visible: false,
  };
  componentDidUpdate() {
    const screenHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
    const ele = document.querySelector('.add-panel .ant-modal-body');
    if (ele) {
      ele.style.height = `${screenHeight * 0.2}px`;
    }
  }
  showModal = () => {
    this.setState({ visible: true });
  }
  handleCancel = () => {
    this.setState({ visible: false });
  }
  handleCreate = () => {
    const form = this.form;
    const {GroupList,selectedRowKeys,groupNumberID,joinAttention} =this.props;
    const Idarr = [];
    selectedRowKeys.map((item)=>{
      Idarr.push(parseInt(item))
    })
    if(_.isEmpty(groupNumberID)){
      message.warning('请选择分组!');
      this.setState({ visible: true });
    }else{
      joinAttention({
        "groupNumbers":groupNumberID,
  			"productIds":Idarr
      })
      this.setState({ visible: false });
    }
    // form.validateFields((err, values) => {
    //   if (err) {
    //     return;
    //   }
    //   this.setState({ visible: false });
    //   form.resetFields();
    // });
  }
  saveFormRef = (form) => {
    this.form = form;
  }
  render() {
    const {hasSelected} =this.props;
    return (
      <div>
        <Button
          type="primary"
          onClick={this.showModal}
          disabled={!hasSelected}
          >
            加入关注
        </Button>
        <JoinAttentionForm
          ref={this.saveFormRef}
          visible={this.state.visible}
          onCancel={this.handleCancel}
          onCreate={this.handleCreate}
          GroupList={this.props.GroupList}
          isPublic={this.props.isPublic}
        />

      </div>
    );
  }
 }
 export default Form.create({
 })(JoinAttention);
